<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>shape-css</title>
	<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../static/css/index.css">
	<style>
		.css-live-wrap hgroup {
			position: absolute;
			top:50%;
			left: 50%;
			transform:translate(-50%,-50%);
		}
	</style>
</head>
<style>
	#cnzz_stat_icon_1259441963{
	  display:block;
	  width:0;
	  height:0;
	  overflow:hidden;
	}
	.blackfilter {
	  background: #000;
	  -webkit-filter: blur(4px) contrast(10);
			  filter: blur(4px) contrast(10);
	}
	.mix-diff {
	  mix-blend-mode: difference;
	  z-index: 1;
	}
	.blackbg {
	  background: #000;
	}
	.flex-wrap {
	  display: flex;
	}
</style>
<body>
<div class="container">
	<!-- 月亮-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>月亮</summary>
		<hgroup id="moon">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#moon {
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  box-shadow: 15px 15px 0 0 red;
	}
	</style>
	</section>
	
	<!-- 菜单-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>菜单</summary>
		<hgroup>
			<i id="icon-menu"></i>
			<i id="icon-dot"></i>
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#icon-menu {
	    display: inline-block;
	    width: 140px; height: 10px;
	    padding: 35px 0;
	    border-top: 10px solid;
	    border-bottom: 10px solid;
	    background-color: currentColor;
	    background-clip: content-box;
	}
	#icon-dot {
	    display: inline-block;
	    width: 100px; height: 100px;
	    padding: 10px;
	    border: 10px solid;    
	    border-radius: 50%;
	    background-color: currentColor;
	    background-clip: content-box;
	}
	</style>
	</section>
	
	<!-- 圆形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>圆形</summary>
		<hgroup id="circle">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
		
	#circle {
		width: 100px;
		height: 100px;
		background: red;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
	}
	</style>
	</section>
	
	<!-- 椭圆-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>椭圆</summary>
		<hgroup id="oval">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	
	#oval {
		width: 200px;
		height: 100px;
		background: red;
		-moz-border-radius: 100px / 50px;
		-webkit-border-radius: 100px / 50px;
		border-radius: 100px / 50px;
	}	
	</style>
	</section>
	
	<!-- 三角形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>三角形</summary>
		<hgroup id="triangle-up">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	
	#triangle-up {
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid red;
		/* border-top: 100px solid red; */
	}	
	</style>
	</section>
	
	<!-- 三角形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>左边三角形</summary>
		<hgroup id="triangle-left">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	
	#triangle-left {
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-right: 100px solid red;
		/* border-left: 100px solid red; */
		border-bottom: 50px solid transparent;
	}	
	</style>
	</section>
	
	<!-- 三角形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>直角三角形</summary>
		<hgroup id="triangle-topleft">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	
	#triangle-topleft {
		width: 0;
		height: 0;
		border-top: 100px solid red;
		border-right: 100px solid transparent;
	}	
	</style>
	</section>
	
	<!-- 箭头-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>弯箭头</summary>
		<hgroup id="curvedarrow">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#curvedarrow {
		width: 0;
		height: 0;
		border-top: 9px solid transparent;
		border-right: 9px solid red;
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	}
	#curvedarrow:after {
		content: "";
		position: absolute;
		border: 0 solid transparent;
		border-top: 3px solid red;
		border-radius: 20px 0 0 0;
		top: -12px;
		left: -9px;
		width: 12px;
		height: 12px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}
	</style>
	</section>
	
	<!-- 六角形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>六角形</summary>
		<hgroup id="star-six">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#star-six {
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid red;
		position: relative;
	}
	#star-six:after {
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-top: 100px solid red;
		position: absolute;
		content: "";
		top: 30px;
		left: -50px;
	}	
	</style>
	</section>
	
	<!-- 五角形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>五角形</summary>
		<hgroup id="star-five">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#star-five {
		display: block;
		color: red;
		width: 0px;
		height: 0px;
		border-right:  100px solid transparent;
		border-bottom: 70px  solid red;
		border-left:   100px solid transparent;
		-moz-transform:    rotate(35deg);
		-webkit-transform: rotate(35deg);
		-ms-transform:     rotate(35deg);
		-o-transform:      rotate(35deg);
	}
	#star-five:before {
		border-bottom: 80px solid red;
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		position: absolute;
		height: 0;
		width: 0;
		top: -45px;
		left: -65px;
		display: block;
		content: '';
		-webkit-transform: rotate(-35deg);
		-moz-transform:    rotate(-35deg);
		-ms-transform:     rotate(-35deg);
		-o-transform:      rotate(-35deg);
	}
	#star-five:after {
		position: absolute;
		display: block;
		color: red;
		top: 3px;
		left: -105px;
		width: 0px;
		height: 0px;
		border-right: 100px solid transparent;
		border-bottom: 70px solid red;
		border-left: 100px solid transparent;
		-webkit-transform: rotate(-70deg);
		-moz-transform:    rotate(-70deg);
		-ms-transform:     rotate(-70deg);
		-o-transform:      rotate(-70deg);
		content: '';
	}
	</style>
	</section>
	
	<!-- 心形-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>心形</summary>
		<hgroup id="heart">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#heart {
	    position: relative;
	    width: 100px;
	    height: 90px;
	}
	#heart:before,
	#heart:after {
	    position: absolute;
	    content: "";
	    left: 50px;
	    top: 0;
	    width: 50px;
	    height: 80px;
	    background: red;
	    -moz-border-radius: 50px 50px 0 0;
	    border-radius: 50px 50px 0 0;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	    -webkit-transform-origin: 0 100%;
	       -moz-transform-origin: 0 100%;
	        -ms-transform-origin: 0 100%;
	         -o-transform-origin: 0 100%;
	            transform-origin: 0 100%;
	}
	#heart:after {
	    left: 0;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	    -webkit-transform-origin: 100% 100%;
	       -moz-transform-origin: 100% 100%;
	        -ms-transform-origin: 100% 100%;
	         -o-transform-origin: 100% 100%;
	            transform-origin :100% 100%;
	}
	</style>
	</section>
	
	<!-- 中国结-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>中国结</summary>
		<hgroup id="infinity">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#infinity {
	    position: relative;
	    width: 212px;
	    height: 100px;
	}
	 
	#infinity:before,
	#infinity:after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 60px;
	    height: 60px;
	    border: 20px solid red;
	    -moz-border-radius: 50px 50px 0 50px;
	         border-radius: 50px 50px 0 50px;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	}
	 
	#infinity:after {
	    left: auto;
	    right: 0;
	    -moz-border-radius: 50px 50px 50px 0;
	         border-radius: 50px 50px 50px 0;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	}
	</style>
	</section>
	
	<!-- 鸡蛋-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>鸡蛋</summary>
		<hgroup id="egg">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#egg {
	   display:block;
	   width: 126px;
	   height: 180px;
	   background-color: red;
	   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
	}
	</style>
	</section>
	
	<!-- pacman-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>pacman</summary>
		<hgroup id="pacman">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#pacman {
	  width: 0px;
	  height: 0px;
	  border-right: 60px solid transparent;
	  border-top: 60px solid red;
	  border-left: 60px solid red;
	  border-bottom: 60px solid red;
	  border-top-left-radius: 60px;
	  border-top-right-radius: 60px;
	  border-bottom-left-radius: 60px;
	  border-bottom-right-radius: 60px;
	}
	</style>
	</section>
	
	<!-- 对话框-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>对话框</summary>
		<hgroup id="talkbubble">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#talkbubble {
	   width: 120px;
	   height: 80px;
	   background: red;
	   position: relative;
	   -moz-border-radius:    10px;
	   -webkit-border-radius: 10px;
	   border-radius:         10px;
	}
	#talkbubble:before {
	   content:"";
	   position: absolute;
	   right: 100%;
	   top: 26px;
	   width: 0;
	   height: 0;
	   border-top: 13px solid transparent;
	   border-right: 26px solid red;
	   border-bottom: 13px solid transparent;
	}
	</style>
	</section>
	
	<!-- 八卦-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>八卦太极</summary>
		<hgroup id="yin-yang">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#yin-yang {
	    width: 96px;
	    height: 48px;
	    background: #eee;
	    border-color: red;
	    border-style: solid;
	    border-width: 2px 2px 50px 2px;
	    border-radius: 100%;
	    position: relative;
	}
	 
	#yin-yang:before {
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 0;
	    background: #eee;
	    border: 18px solid red;
	    border-radius: 100%;
	    width: 12px;
	    height: 12px;
	}
	 
	#yin-yang:after {
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    background: red;
	    border: 18px solid #eee;
	    border-radius:100%;
	    width: 12px;
	    height: 12px;
	}
	</style>
	</section>
	
	<!-- Space Invader-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>Space Invader</summary>
		<hgroup id="space-invader">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#space-invader{
	  box-shadow:
	    0 0 0 1em red,
	    0 1em 0 1em red,
	    -2.5em 1.5em 0 .5em red,
	    2.5em 1.5em 0 .5em red,
	    -3em -3em 0 0 red,
	    3em -3em 0 0 red,
	    -2em -2em 0 0 red,
	    2em -2em 0 0 red,
	    -3em -1em 0 0 red,
	    -2em -1em 0 0 red,
	    2em -1em 0 0 red,
	    3em -1em 0 0 red,
	    -4em 0 0 0 red,
	    -3em 0 0 0 red,
	    3em 0 0 0 red,
	    4em 0 0 0 red,
	    -5em 1em 0 0 red,
	    -4em 1em 0 0 red,
	    4em 1em 0 0 red,
	    5em 1em 0 0 red,
	    -5em 2em 0 0 red,
	    5em 2em 0 0 red,
	    -5em 3em 0 0 red,
	    -3em 3em 0 0 red,
	    3em 3em 0 0 red,
	    5em 3em 0 0 red,
	    -2em 4em 0 0 red,
	    -1em 4em 0 0 red,
	    1em 4em 0 0 red,
	    2em 4em 0 0 red;
	 
	    background: red;
	    width: 1em;
	    height: 1em;
	    overflow: hidden;
	  }
	</style>
	</section>
	
	<!-- 十字架-shaped -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>十字架</summary>
		<hgroup id="cross">
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
	#cross {
	  background: red;
	  height: 100px;
	  position: relative;
	  width: 20px;
	}
	#cross:after {
	  background: red;
	  content: "";
	  height: 20px;
	  left: -40px;
	  position: absolute;
	  top: 40px;
	  width: 100px;
	}
	</style>
	</section>
</div>
</body>
</html>
